<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>API 数据展示</title>
</head>
<body>

<h1>选择分类:</h1>

<!-- 分类选项 -->
<button onclick="fetchData(1)">风景</button>
<button onclick="fetchData(2)">动漫</button>
<button onclick="fetchData(3)">美女</button>
<button onclick="fetchData(4)">游戏</button>
<button onclick="fetchData(5)">明星</button>
<button onclick="fetchData(6)">动物</button>
<button onclick="fetchData(7)">科幻</button>

<h2>数据结果:</h2>

<!-- 显示数据的区域 -->
<div id="data-container"></div>

<script>
// 获取数据函数
function fetchData(categoryId) {
    const url = 'https://api.yuqios.com/yqbizhi.php?type=' + categoryId + '&page=1';
    
    fetch(url)
        .then(response => response.json())
        .then(data => {
            displayData(data);
        })
        .catch(error => console.error('Error:', error));
}

// 展示数据函数
function displayData(data) {
    const container = document.getElementById('data-container');
    container.innerHTML = ''; // 清除旧数据
    
    if (data && data.length > 0) {
        data.forEach(item => {
            const div = document.createElement('div');
            div.textContent = JSON.stringify(item, null, 2); // 格式化输出JSON数据
            container.appendChild(div);
        });
    } else {
        const p = document.createElement('p');
        p.textContent = '没有数据可供显示';
        container.appendChild(p);
    }
}
</script>

</body>
</html>
